<template>
  <div>
       <div class="goodsMessage">
      <p class="p">{{ state.title }}</p>
      <!-- 价格 -->
      <div class="price">
        <!-- 新价格 -->
        <span class="newprice">{{ state.price }}</span>
        <!-- 老价格 -->
       <del>{{ state.oldPrice }}</del>
        <van-badge
          color="#FF6699"
          class="badge"
          :content="state.discountDesc"
        >
        </van-badge>
      </div> 

      <!-- 销量等 -->
      <div class="number d-flex justify-space-between mt-2">
        <span>{{ columns[0] }}</span>
        <span>{{ columns[1] }}</span>
        <span>{{ footer.name }}</span>
      </div>
      <!-- 分割线 -->
      <van-divider />
      <!-- 物流信息 -->
      <div class="d-flex columns justify-space-between">
        <p v-for="item in state.columns" :key="item">
          <van-icon name="passed" />
          {{ item.name }}
        </p>
      </div>
      <!-- 分割线 -->
    </div>
  </div>
</template>

<script>

export default  ({
    props:['state','columns','footer']
})
</script>


<style lang="scss" scoped>
// 商品信息
.goodsMessage {
  padding: 0 5px;
  color: #222;
  overflow: hidden;
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

.price {
  position: relative;
  .newprice {
    color: #ff5777;
    font-size: 24px;
  }
  del {
    font-size: 13px;
    margin-left: 5px;
    color: #999;
  }
}
// 数量
.number {
  color: #999;
  font-size: 15px;
}
.badge {
  white-space: nowrap;
  position: absolute;
  top: -5px;
}
// 物流信息
.columns {
  font-size: 13px;
  white-space: nowrap;
}
</style>
